<!-- CommodityAttributes.vue -->
<template>
  <div class="main">
    <div class="card-section" v-if="0">
      <div class="card-title">商品规格</div>
      <el-divider />
      <div style="display: flex; align-items: center; margin-bottom: 20px;">
        <div class="card-titles">颜色</div>
          <div class="GreyBottom">


              <div v-for="(data, index) in specForms.bodyColors" :key="index" style="display: flex; align-items: center; margin-right: 20px;">
                <img src=imgUrl alt="" class="box40x40">
                <!-- 颜色展示部分 -->
                <span class="box40s">{{ data.label }}</span>
                
                <!-- 编辑按钮 -->
                <!-- <el-button type="text" size="small" @click="editColor(index)">编辑</el-button> -->
                
                <!-- 删除按钮 -->
                <!-- <el-button type="text" size="small" style="color: #f56c6c;" @click="deleteColor(index)">删除</el-button> -->
                <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="handleDeleteBodyColor(index)">
                  <img src="@/assets/delete.svg" alt="删除" style="width: 16px; height: 16px;">
                </el-button>
              </div>
                  
              <!-- 图片 -->
              <div style="display: flex; align-items: center;">
                <el-upload
                  class="upload-image"
                  ref="upload"
                  action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
                  :headers="uploadHeaders"
                  :data="loadFileParams"
                  :limit="1"
                  :on-change="handleChange"
                  :on-success="handleUploadSuccess"
                >
                  <div v-if="!imageUrl" class="upload-placeholder">
                    <div style="width: 40px; height: 40px; border: 1px dashed #ccc;"></div>
                  </div>
                  <div v-else class="image-preview">
                    <img :src="imageUrl" :width="40" :height="40" alt="preview" @click.stop="handlePreview(imageUrl)" />
                    <div class="actions" v-if="imageUrl">
                      <el-button type="text" icon="el-icon-delete" @click.stop="handleRemove"></el-button>
                    </div>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="30%" :src="dialogImageUrl" alt="" />
                </el-dialog>
                <!-- <el-upload
                  class="upload-image"
                  action="yourUploadApi"
                  list-type="picture-card"
                  :auto-upload="true"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleUploadSuccess"
                >
                </el-upload> -->

                <!-- 添加颜色输入框 -->
                <!-- <el-input
                  v-model="tempBodyColor"
                  placeholder="输入新颜色"
                  @keyup.enter.native="handleAddBodyColor"
                  class="box40s"
                /> -->
                <!-- <el-cascader
                  :options="colorOptions"
                  :show-all-levels="false"
                  :props="{ expandTrigger: 'hover', multiple: false,  emitPath: false }"
                  placeholder="主色（必选）"
                  @change="handleColorChange"
                  class="box40s"
                ></el-cascader> -->
                <custom-cascader-with-popup :options="colorOptions" v-model="selectedOption" class="box40s2"/>
              
                <div
                  @click="handleAddBodyColor"
                  style="margin-left: 10px;"
                >+新增规格</div>
              </div>
          </div>
      </div>
    
      <div style="display: flex; align-items: center; margin-bottom: 20px;">
        <div class="card-titles">存储容量</div>
          <div class="GreyBottom">


              <div v-for="(data, index) in specForms.storageCapacities" :key="index" style="display: flex; align-items: center; margin-right: 20px;">

                <!-- 存储展示部分 -->
                <span class="box40s">{{ data.label }}</span>
                <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="handleDeleteStorageCapacity(index)">
                  <img src="@/assets/delete.svg" alt="删除" style="width: 16px; height: 16px;">
                </el-button>
              </div>

              <!-- 存储容量输入与新增按钮 -->
              <div style="display: flex; align-items: center;">
                <el-input
                  v-model="tempStorageCapacity"
                  placeholder="输入新存储容量"
                  @keyup.enter.native="handleAddStorageCapacity"
                  class="box40m"
                />
                <!-- 点击按钮新增存储容量 -->
                <div
                  @click="handleAddStorageCapacity"
                  style="margin-left: 10px;"
                >+新增规格</div>
              </div>

          </div>
      </div>

      <div style="display: flex; align-items: center; margin-bottom: 20px;">
        <div class="card-titles">网络类型</div>
          <div class="GreyBottom">


              <div v-for="(data, index) in specForms.networkTypes" :key="index" style="display: flex; align-items: center; margin-right: 20px;">

                <!-- 网络类型部分 -->
                <span class="box40s">{{ data.label }}</span>
                <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="handleDeleteNetworkType(index)">
                  <img src="@/assets/delete.svg" alt="删除" style="width: 16px; height: 16px;">
                </el-button>
              </div>
                  
              <div style="display: flex; align-items: center;">

                <!-- 添加网络类型输入框 -->
                <el-input
                  v-model="tempNetworkType"
                  placeholder="输入新网络类型"
                  @keyup.enter.native="handleAddNetworkType"
                  class="box40m"
                />
              
                <div
                  @click="handleAddNetworkType"
                  style="margin-left: 10px;"
                >+新增规格</div>
              </div>
          </div>
      </div>
    </div>

      <!-- 商品规格 -->
    <div class="card-section" v-if="0">
      <div class="card-title">商品参数</div>
      <el-divider />
      <div class="mincolumn">
        <!-- 屏幕尺寸 -->
        <div class="minrow">
          <div class="card-titles">屏幕尺寸</div>

          <el-input class="box40l" v-model="specForms.screenSizes"></el-input>

        </div>
        <!-- 系统 -->
        <div class="minrow">
        <div class="card-titles">系统</div>
          <el-select class="box40l" v-model="specForms.systems" placeholder="请选择系统">
            <el-option label="Android" value="Android"></el-option>
            <el-option label="iOS" value="iOS"></el-option>
            <!-- 更多系统 -->
          </el-select>
        </div>
            
        <!-- 电池容量 -->
        <div class="minrow">
          <div class="card-titles">电池容量</div>

          <el-input class="box40l" v-model="specForms.batteryCapacities"></el-input>

        </div>

        <!-- <el-divider />
        <div v-for="(options, categoryName) in groupedCategories" :key="categoryName" class="minrow">
          <div class="card-titles">{{ categoryName }}</div>
          <el-select v-model="selectedValues[categoryName]" placeholder="请选择" class="box40l">
            <el-option
              v-for="option in options"
              :key="option.value"
              :label="option.label"
              :value="option.value">
            </el-option>
          </el-select>
        </div>

        <div v-for="categoryName in inputlessCategoryNames" :key="categoryName" class="minrow">
          <div class="card-titles">{{ categoryName }}</div>
          <el-input v-model="inputValues[categoryName]" placeholder="请输入" class="box40l"></el-input>
        </div> -->

        <!-- <div>
          <div v-for="category in categoryData.categoryTypVOList" :key="category.id">
            <div class="card-title">{{ category.name }}</div>
            <el-divider />
            <div v-for="attr in category.categoryAttributeListVOList" :key="attr.id">
              <div v-if="attr.inputType === 1" class="minrow">
                <div class="card-titles">{{ attr.name }}</div>
                <el-select v-model="selectedValues[attr.name]" placeholder="请选择" class="box40l">
                  <el-option
                    v-for="option in attr.inputList.split(',')"
                    :key="option"
                    :label="option"
                    :value="option">
                  </el-option>
                </el-select>
              </div>
              <div v-else-if="attr.inputType === 0" class="minrow">
                <el-input v-model="inputValues[attr.name]" placeholder="请输入" class="box40l"></el-input>
              </div>
            </div>
          </div>
        </div> -->
        <!-- <button @click="abc">要提交的数据</button> -->
      </div>
      
    </div>

    <div class="card-section">
      <div class="mincolumn">
        <div v-if="!(categoryData && categoryData.categoryTypVOList && categoryData.categoryTypVOList.length)">
          无分类数据
        </div>

        <div>
          <div v-for="category in categoryData.categoryTypVOList" :key="category.id">
            <div class="card-title">{{ category.name }}</div>
            <el-divider />
            <div v-for="attr in category.categoryAttributeListVOList" :key="attr.id">

              <div v-if="attr.inputType === 0" class="minrow">
                <div class="card-titles">{{ attr.name }}</div>

                <div v-if="attr.selectType === 0">
                  <div class="GreyBottom">
                    <div v-for="(item, index) in inputValues[attr.num]" :key="index" style="display: flex; align-items: center; margin-right: 20px;">
                      <div>
                        <el-upload
                          class="upload-image"
                          ref="upload"
                          action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
                          :headers="uploadHeaders"
                          :data="loadFileParams"
                          list-type="text"
                          :on-remove="handleRemoveFile"
                          :show-file-list="false"
                          :on-change="(file, fileList) => {handleChange(file, fileList, attr.num , index)}"
                          :on-success="(response, file, fileList) => {handleUploadSuccess(response, file, fileList, attr.num , index)}"
                        >
                          <div v-if="!displayedImageUrl[attr.num][index]" class="upload-placeholder">
                            <div style="width: 40px; height: 40px; border: 1px dashed #ccc;"></div>
                          </div>
                          <!-- <div v-else class="image-preview">
                            <img :src="displayedImageUrl[attr.num][index]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][index])" />
                            <div class="actions" v-if="displayedImageUrl[attr.num][index]">
                              <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num , index)"></el-button>
                            </div>
                          </div> -->
                          <div v-else class="image-preview">
                            <img :src="displayedImageUrl[attr.num][index]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][index],attr.num,index)"/>
                            <!-- <div class="actions" v-if="displayedImageUrl[attr.num][index]">
                              <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num, index)"></el-button>
                            </div> -->
                            <div @click.stop="closePreview(attr.num,index)">
                              <el-popover
                                v-model="dialogImage[attr.num][index]"
                                placement="top"
                              >
                                <div class="preview-popup">
                                  <img :src="displayedImageUrl[attr.num][index]" :width="160" :height="160" alt="enlarged preview"/>
                                  <el-button type="info" plain size="small" @click.stop="handleRemove(file, fileList, attr.num, index)">删除</el-button>
                                </div>
                              </el-popover>
                            </div>
                          </div>
                        </el-upload>
                        <!-- <el-dialog :visible.sync="dialogImage" :modal="false" width="10%">
                          <img  :src="dialogImageUrl" alt="" />
                        </el-dialog> -->
                      </div>
                      <span class="box40s">{{ item.name }}</span>
                      <el-popover
                        placement="top"
                        v-model="item.visible"
                        style="margin-right: 5px;"
                      >
                        <el-input
                          v-model="inputValues[attr.num][index].memo"
                          placeholder="输入该商品详情"
                          class="box40m"
                        />
                        <!-- <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                          <el-button type="primary" size="mini" @click="item.visible = false">确定</el-button>
                        </div> -->
                        <el-button type="text" slot="reference" size="mini" style="color: black;">
                          详情△
                        </el-button>
                      </el-popover>
                      <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="handleDeleteInputValues(attr.num,index)">
                        <img src="@/assets/delete.svg" alt="删除" style="width: 16px; height: 16px;">
                      </el-button>
                    </div>
                    <div v-if="!inputValues[attr.num] || inputValues[attr.num].length === 0" style="display: flex; align-items: center;">
                      <el-input
                        v-model="tempInputValues[attr.num]"
                        placeholder="输入新增规格"
                        @keyup.enter="handleAddInputValues(attr.num)"
                        class="box40m"
                      />
                      <div
                        @click="handleAddInputValues(attr.num)"
                        style="margin-left: 10px;"
                      >+新增规格</div>
                    </div>
                  </div>
                </div>
                <div v-if="attr.selectType === 2">
                  <div class="GreyBottom">
                    <div v-for="(item, index) in inputValues[attr.num]" :key="index" style="display: flex; align-items: center; margin-right: 20px;">
                      <div>
                        <el-upload
                          class="upload-image"
                          ref="upload"
                          action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
                          :headers="uploadHeaders"
                          :data="loadFileParams"
                          list-type="text"
                          :on-remove="handleRemoveFile"
                          :show-file-list="false"
                          :on-change="(file, fileList) => {handleChange(file, fileList, attr.num , index)}"
                          :on-success="(response, file, fileList) => {handleUploadSuccess(response, file, fileList, attr.num , index)}"
                        >
                          <div v-if="!displayedImageUrl[attr.num][index]" class="upload-placeholder">
                            <div style="width: 40px; height: 40px; border: 1px dashed #ccc;"></div>
                          </div>
                          <!-- <div v-else class="image-preview">
                            <img :src="displayedImageUrl[attr.num][index]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][index])" />
                            <div class="actions" v-if="displayedImageUrl[attr.num][index]">
                              <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num , index)"></el-button>
                            </div>
                          </div> -->
                          <div v-else class="image-preview">
                            <img :src="displayedImageUrl[attr.num][index]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][index],attr.num,index)"/>
                            <!-- <div class="actions" v-if="displayedImageUrl[attr.num][index]">
                              <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num, index)"></el-button>
                            </div> -->
                            <div @click.stop="closePreview(attr.num,index)">
                              <el-popover
                                v-model="dialogImage[attr.num][index]"
                                placement="top"
                              >
                                <div class="preview-popup">
                                  <img :src="displayedImageUrl[attr.num][index]" :width="160" :height="160" alt="enlarged preview"/>
                                  <el-button type="info" plain size="small" @click.stop="handleRemove(file, fileList, attr.num, index)">删除</el-button>
                                </div>
                              </el-popover>
                            </div>
                          </div>
                        </el-upload>
                        <!-- <el-dialog :visible.sync="dialogImage" :modal="false" width="10%">
                          <img  :src="dialogImageUrl" alt="" />
                        </el-dialog> -->
                      </div>
                      <span class="box40s">{{ item.name }}</span>
                      <el-popover
                        placement="top"
                        v-model="item.visible"
                        style="margin-right: 5px;"
                      >
                        <el-input
                          v-model="inputValues[attr.num][index].memo"
                          placeholder="输入该商品详情"
                          class="box40m"
                        />
                        <!-- <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                          <el-button type="primary" size="mini" @click="item.visible = false">确定</el-button>
                        </div> -->
                        <el-button type="text" slot="reference" size="mini" style="color: black;">
                          详情△
                        </el-button>
                      </el-popover>
                      <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="handleDeleteInputValues(attr.num,index)">
                        <img src="@/assets/delete.svg" alt="删除" style="width: 16px; height: 16px;">
                      </el-button>
                    </div>
                    <div style="display: flex; align-items: center;">
                      <el-input
                        v-model="tempInputValues[attr.num]"
                        placeholder="输入新增规格"
                        @keyup.enter="handleAddInputValues(attr.num)"
                        class="box40m"
                      />
                      <div
                        @click="handleAddInputValues(attr.num)"
                        style="margin-left: 10px;"
                      >+新增规格</div>
                    </div>
                  </div>
                </div>
                <!-- <el-input v-model="inputValues[attr.name]" placeholder="请输入" class="box40l"></el-input> -->
              </div>
              <div v-else-if="attr.inputType === 1" class="minrow">
                <div class="card-titles">{{ attr.name }}</div>
                <div v-if="attr.selectType === 1" class="minrow">
                  <div v-if="inputValues[attr.num][0].name !=''">
                    <el-upload
                      class="upload-image"
                      ref="upload"
                      action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
                      :headers="uploadHeaders"
                      :data="loadFileParams"
                      list-type="text"
                      :on-remove="handleRemoveFile"
                      :show-file-list="false"
                      :on-change="(file, fileList) => {handleChange(file, fileList, attr.num , 0)}"
                      :on-success="(response, file, fileList) => {handleUploadSuccess(response, file, fileList, attr.num , 0)}"
                    >
                      <div v-if="!displayedImageUrl[attr.num][0]" class="upload-placeholder">
                        <div style="width: 40px; height: 40px; border: 1px dashed #ccc;"></div>
                      </div>
                      <!-- <div v-else class="image-preview">
                        <img :src="displayedImageUrl[attr.num][0]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][0])" />
                        <div class="actions" v-if="displayedImageUrl[attr.num][0]">
                          <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num , 0)"></el-button>
                        </div>
                      </div> -->
                      <div v-else class="image-preview">
                        <img :src="displayedImageUrl[attr.num][0]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][0],attr.num,0)"/>
                        <!-- <div class="actions" v-if="displayedImageUrl[attr.num][0]">
                          <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num, 0)"></el-button>
                        </div> -->
                        <div @click.stop="closePreview(attr.num,0)">
                          <el-popover
                            v-model="dialogImage[attr.num][0]"
                            placement="top"
                          >
                            <div class="preview-popup">
                              <img :src="displayedImageUrl[attr.num][0]" :width="160" :height="160" alt="enlarged preview"/>
                              <el-button type="info" plain size="small" @click.stop="handleRemove(file, fileList, attr.num, 0)">删除</el-button>
                            </div>
                          </el-popover>
                        </div>
                      </div>
                    </el-upload>
                    <!-- <el-dialog :visible.sync="dialogImage" :modal="false" width="10%">
                      <img  :src="dialogImageUrl" alt="" />
                    </el-dialog> -->
                  </div>
                  <el-select
                    v-model="inputValues[attr.num][0].name"
                    placeholder="请选择"
                    @change="handleRadio"
                    >
                    <el-option
                      v-for="option in tempInputValues[attr.num]"
                      :key="option.name"
                      :label="option.name"
                      :value="option.name">
                    </el-option>
                  </el-select>
                  <el-popover
                    placement="top"
                    v-model="attr.visible"
                    style="margin: 5px;"
                    v-if="inputValues[attr.num][0].name !=''"
                  >
                    <el-input
                      v-model="inputValues[attr.num][0].memo"
                      placeholder="输入该商品详情"
                      class="box40m"
                    />
                    <!-- <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                      <el-button type="primary" size="mini" @click="item.visible = false">确定</el-button>
                    </div> -->
                    <el-button type="text" slot="reference" size="mini" style="color: black;">
                      详情△
                    </el-button>
                  </el-popover>
                  <div
                    v-if="attr.handAddStatus == 1"
                    @click="openRadioDialog(attr.num)"
                    style="margin-top: 10px;"
                    >+新增规格
                  </div>
                  <!-- 添加单选对话框 -->
                  <el-dialog :visible.sync="radioDialog" title="输入内容":modal="false"width ="10%">
                    <el-input v-model="tempRadio"></el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="radioDialog = false">取消</el-button>
                      <el-button @click="handleAddRadio(attr.num)">确定</el-button>
                    </span>
                  </el-dialog>
                </div>
                <div v-if="attr.selectType === 2">
                  <div class="GreyBottom">
                    <div v-for="(item, index) in inputValues[attr.num]" :key="index" style="display: flex; align-items: center; margin-right: 20px;">
                      <div>
                        <el-upload
                          class="upload-image"
                          ref="upload"
                          action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
                          :headers="uploadHeaders"
                          :data="loadFileParams"
                          list-type="text"
                          :on-remove="handleRemoveFile"
                          :show-file-list="false"
                          :on-change="(file, fileList) => {handleChange(file, fileList, attr.num , index)}"
                          :on-success="(response, file, fileList) => {handleUploadSuccess(response, file, fileList, attr.num , index)}"
                        >
                          <div v-if="!displayedImageUrl[attr.num][index]" class="upload-placeholder">
                            <div style="width: 40px; height: 40px; border: 1px dashed #ccc;"></div>
                          </div>
                          <!-- <div v-else class="image-preview">
                            <img :src="displayedImageUrl[attr.num][index]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][index])" />
                            <div class="actions" v-if="displayedImageUrl[attr.num][index]">
                              <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num , index)"></el-button>
                            </div>
                          </div> -->
                          <div v-else class="image-preview">
                            <img :src="displayedImageUrl[attr.num][index]" :width="40" :height="40" alt="preview" @click.stop="handlePreview(displayedImageUrl[attr.num][index],attr.num,index)"/>
                            <!-- <div class="actions" v-if="displayedImageUrl[attr.num][index]">
                              <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;" icon="el-icon-delete" @click="handleRemove(file, fileList, attr.num, index)"></el-button>
                            </div> -->
                            <div @click.stop="closePreview(attr.num,index)">
                              <el-popover
                                v-model="dialogImage[attr.num][index]"
                                placement="top"
                              >
                                <div class="preview-popup">
                                  <img :src="displayedImageUrl[attr.num][index]" :width="160" :height="160" alt="enlarged preview"/>
                                  <el-button type="info" plain size="small" @click.stop="handleRemove(file, fileList, attr.num, index)">删除</el-button>
                                </div>
                              </el-popover>
                            </div>

                          </div>
                        </el-upload>
                        <!-- <el-dialog :visible.sync="dialogImage" :modal="false" width="10%">
                          <img  :src="dialogImageUrl" alt="" />
                        </el-dialog> -->
                      </div>
                      <span class="box40s">{{ item.name }}</span>
                      <el-popover
                        placement="top"
                        v-model="item.visible"
                        style="margin-right: 5px;"
                      >
                        <el-input
                          v-model="inputValues[attr.num][index].memo"
                          placeholder="输入该商品详情"
                          class="box40m"
                        />
                        <!-- <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                          <el-button type="primary" size="mini" @click="item.visible = false">确定</el-button>
                        </div> -->
                        <el-button type="text" slot="reference" size="mini" style="color: black;">
                          详情△
                        </el-button>
                      </el-popover>

                      <el-button type="text" size="small" style="background: none; border: none; cursor: pointer;"  @click="handleDeleteInputValues(attr.num,index)">
                        <img src="@/assets/delete.svg" alt="删除" style="width: 16px; height: 16px;">
                      </el-button>
                    </div>
                    <div v-if="attr.handAddStatus == 1" style="display: flex; align-items: center;">
                      <el-input
                        v-model="tempInputValues[attr.num]"
                        placeholder="输入新增规格"
                        @keyup.enter="handleAddInputValues(attr.num)"
                        class="box40m"
                      />
                      <div
                        @click="handleAddInputValues(attr.num)"
                        style="margin-left: 10px;"
                      >+新增规格</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>

    <div class="card-section">
      <div class="card-title">SKU设定</div>
      <!-- <el-divider />

      <el-input class="box40l" v-model="specForms.sku" placeholder="请填写SKU"></el-input> -->

      <el-divider />
      <!-- <el-button @click="abc" style="width: 100px;">刷新sku表</el-button> -->
      <div >
        <!-- Checkbox Group -->
        <el-checkbox-group v-model="checkedAttributes" class="boxtb">
          <el-checkbox
            v-for="(value, key) in selectedValues"
            :key="key"
            :label="key"
            class="custom-checkbox"
          >{{ key }}</el-checkbox>
        </el-checkbox-group>
      
        <!-- Table for Displaying Cartesian Product -->
        <el-table :data="cartesianProduct" border style="width: 100%" class="boxtb">
          <el-table-column
            v-for="prop in checkedAttributes"
            :key="prop"
            :prop="prop"
            :label="prop"
          ></el-table-column>
          <el-table-column label="SKU" v-if="checkedAttributes.length > 0">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sku" @input="handleSkuInput" placeholder="请输入SKU"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- <button @click="abc" v-if="checkedAttributes.length > 0">输出表格</button> -->
      </div>

      <!-- <div class="minrow">
        <el-checkbox :label="true" name="机身颜色" class="custom-checkbox">机身颜色</el-checkbox>
        <el-checkbox :label="true" name="存储容量" class="custom-checkbox">存储容量</el-checkbox>
        <el-checkbox :label="true" name="网络类型" class="custom-checkbox">网络类型</el-checkbox>
        <el-checkbox :label="true" name="屏幕尺寸" class="custom-checkbox">屏幕尺寸</el-checkbox>
      </div> -->
      <!-- <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="color"
            label="颜色"
          >
          </el-table-column>
          <el-table-column
            prop="capacity"
            label="容量"
          >
          </el-table-column>
          <el-table-column
            prop="skuNumber"
            label="SKU编号"
          >
          </el-table-column>
        </el-table>
      </div> -->
      <!-- SKU列表展示 -->
      <div>
       <!-- <button @click="addSku">addSku</button> -->
      <!-- <el-table
        :data="skuList"
        stripe
        border
        style="width: 100%;"
        :cell-style="{ padding: '5px' }"
        :header-cell-style="{ padding: '5px', backgroundColor: '#f5f7fa' }"
      >
        <el-table-column prop="bodyColor" label="机身颜色" min-width="80"></el-table-column>
        <el-table-column prop="storageCapacity" label="存储容量" min-width="90"></el-table-column>
        <el-table-column prop="networkType" label="网络类型" min-width="100"></el-table-column>
        <el-table-column prop="screenSize" label="屏幕尺寸" min-width="80"></el-table-column>
        <el-table-column prop="system" label="系统" min-width="80"></el-table-column>
        <el-table-column prop="batteryCapacity" label="电池容量" min-width="100"></el-table-column>
        <el-table-column prop="skuNumber" label="SKU编号" min-width="80"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="mini" type="text" @click.prevent="editSku(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click.prevent="deleteSku(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->
      </div>
    </div>


    <!-- 添加编辑SKU编号对话框 -->
    <!-- <el-dialog
      title="编辑SKU编号"
      :visible.sync="dialogEditVisible"
      width="30%"
      @close="resetEditForm">
      <el-form :model="editSkuForm" label-width="80px" ref="editSkuFormRef">
        <el-form-item label="新SKU编号">
          <el-input v-model="editSkuForm.skuNumber" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEditedSku">保存</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import CustomCascaderWithPopup from './CustomCascaderWithPopup.vue';
import { mapGetters , mapState  } from 'vuex';
import { getCategoryData } from '@/api/api.js'
  export default {
    components: {
      CustomCascaderWithPopup,
    },
      data() {
          return {
            uploadHeaders: {
              'X-SYSTEM': 'saas',
              'X-Access-Token': this.$store.state.XAccessToken == ''?sessionStorage.getItem('XAccessToken'):this.$store.state.XAccessToken,
              'Sys-Access-Token': this.$store.state.SysAccessToken,
            },
            loadFileParams: {
              folderId: '40287e01907244650190729cf393002d',
              isCover: '0',
            },
            specForm: {
              // bodyColors: [{value: 'black', label: '黑色'},],
              // storageCapacities: [{value: '64GB', label: '64GB'}, {value: '128GB', label: '128GB'}],
              // networkTypes: [{value: '4G', label: '4G'}, {value: '5G', label: '5G'}],
              // screenSizes: [{value: '5.5寸'}, {value: '6.0寸'}],
              // systems: [{value: 'Android'}, {value: 'iOS'}],
              // batteryCapacities: [{value: '3000mAh'}, {value: '4000mAh'}],


              bodyColors: [],
              storageCapacities: [],
              networkTypes: [],
              screenSizes: '',
              systems: '',
              batteryCapacities: '',
              sku: '',
            },
            // moreSpecForm: {
            //     screenSize: '',
            //     system: '',
            //     batteryCapacity: '',
            // },
            skuList: [
            
            ],

            colorOptions: [
              {
                value: 'whiteSeries',
                label: '白色系',
                colorCode: '#FFFFFF',
                children: [
                  { value: 'white', label: '白色', colorCode: '#FFFFFF' },
                  { value: 'ivory', label: '乳白色', colorCode: '#FFFFF0' },
                  { value: 'offWhite', label: '米白色', colorCode: '#F5F5F5' }
                ]
              },
              {
                value: 'graySeries',
                label: '灰色系',
                colorCode: '#808080',
                children: [
                  { value: 'lightGray', label: '浅灰色', colorCode: '#D3D3D3' },
                  { value: 'mediumGray', label: '中灰色', colorCode: '#A9A9A9' },
                  { value: 'darkGray', label: '深灰色', colorCode: '#696969' }
                ]
              },
              {
                value: 'blackSeries',
                label: '黑色系',
                colorCode: '#000000',
                children: [
                  { value: 'black', label: '黑色', colorCode: '#000000' }
                ]
              },
              {
                value: 'redSeries',
                label: '红色系',
                colorCode: '#FF0000',
                children: [
                  { value: 'crimson', label: '深红', colorCode: '#DC143C' },
                  { value: 'scarlet', label: '猩红', colorCode: '#FF2400' },
                  { value: 'rose', label: '玫瑰红', colorCode: '#FFC0CB' }
                ]
              },
              {
                value: 'yellowSeries',
                label: '黄色系',
                colorCode: '#FFFF00',
                children: [
                  { value: 'lemon', label: '柠檬黄', colorCode: '#FFFF00' },
                  { value: 'mustard', label: '芥末黄', colorCode: '#FFDB58' },
                  { value: 'gold', label: '金色', colorCode: '#FFD700' }
                ]
              },
              {
                value: 'greenSeries',
                label: '绿色系',
                colorCode: '#008000',
                children: [
                  { value: 'lime', label: '酸橙绿', colorCode: '#00FF00' },
                  { value: 'olive', label: '橄榄绿', colorCode: '#808000' },
                  { value: 'forestGreen', label: '森林绿', colorCode: '#228B22' }
                ]
              },
              {
                value: 'blueSeries',
                label: '蓝色系',
                colorCode: '#0000FF',
                children: [
                  { value: 'skyBlue', label: '天蓝', colorCode: '#87CEEB' },
                  { value: 'navy', label: '海军蓝', colorCode: '#000080' },
                  { value: 'turquoise', label: '绿松石色', colorCode: '#40E0D0' }
                ]
              },
              {
                value: 'purpleSeries',
                label: '紫色系',
                colorCode: '#800080',
                children: [
                  { value: 'violet', label: '紫罗兰色', colorCode: '#EE82EE' },
                  { value: 'magenta', label: '品红', colorCode: '#FF00FF' },
                  { value: 'lavender', label: '薰衣草紫', colorCode: '#E6E6FA' }
                ]
              },
              {
                value: 'brownSeries',
                label: '棕色系',
                colorCode: '#A52A2A',
                children: [
                  { value: 'chocolate', label: '巧克力色', colorCode: '#D2691E' },
                  { value: 'tan', label: '茶色', colorCode: '#D2B48C' },
                  { value: 'beige', label: '米棕色', colorCode: '#F5F5DC' }
                ]
              },
              {
                value: 'patternedSeries',
                label: '花色系',
                colorCode: '#808080',
                children: [
                  { value: 'striped', label: '条纹', colorCode: '#808080' },
                  { value: 'polkaDot', label: '波点', colorCode: '#808080' },
                  { value: 'floral', label: '花卉图案', colorCode: '#808080' }
                ]
              },
              {
                value: 'transparentSeries',
                label: '透明系',
                colorCode: 'transparent',
                children: [
                  { value: 'clear', label: '透明', colorCode: 'transparent' }
                ]
              }
            ],
            
            selectedOption: null, // 初始化选中项
            newSpecifications: [],
            // 临时变量用于添加新选项时的输入
            tempImageUrl: '',
            tempStorageCapacity: '',
            tempNetworkType: '',

            imageUrl: '',
            dialogVisible: false,
            dialogImageUrl: '',
            
            dialogImage: Array.from({ length: 30 }, () => Array(30).fill(false)),
            displayedImageUrl: Array.from({ length: 30 }, () => Array(30).fill('')),
            displayedImage: Array.from({ length: 30 }, () => Array(30).fill('')),
            file: [],
            fileList: [],

            skuCounter: 1, // SKU编号计数器
            dialogEditVisible: false, // 控制编辑对话框的显示隐藏
            editSkuForm: {}, // 存储待编辑的SKU信息
            editSkuFormRef: null, // 用于获取表单实例
            tableData: [
              { id: 1, color: '金色', capacity: '8+256', skuNumber: '4895446464' },
              { id: 2, color: '红色', capacity: '8+256', skuNumber: '4895446464' },
              { id: 3, color: '白色', capacity: '8+256', skuNumber: '4895446464' },
            ],
            radioDialog: false,
            tempRadio: '',
            categoryData: [],
            normalCategoryData: [],
            groupedCategories: {},
            inputlessCategoryNames: [],
            selectedValues: {},
            tempInputValues:Array.from({length: 100}, () => null),
            inputValues: [],
            checkedAttributes: [], // 用于存储用户选中的属性
            cartesianProduct: [], // 存储笛卡尔积结果
          };
      },
      computed: {
        // // 从 Vuex store 中获取数据
        // commodityAttributesData() {
        //   return this.$store.state.addCommodity.specForm;
        // },
        ...mapState({
          // 使用 mapState 辅助函数映射 state 到计算属性
          commodityType: state => state.addCommodity.ruleForm.commodityType,
          specForms: state => state.addCommodity.specForm
        }),
      },
      watch: {
        // // 监听 specForm 的变化，当数据改变时更新 Vuex store
        // specForm: {
        //   handler(newVal) {
        //     this.updateAddCommodityData(newVal);
        //   },
        //   deep: true // 深度监听，以便检测对象内部的变化
        // },

        // 当checkedAttributes变化时，重新计算笛卡尔积
        checkedAttributes: {
          handler() {
            this.calculateCartesianProduct();
          },
          deep: true
        },
            // 监听 selectedValues 的变化
        selectedValues: {
          handler: function (newVal, oldVal) {
            this.updateAndTransformData();
          },
          deep: true
        },
        // 监听 inputValues 的变化
        inputValues: {
          handler: function (newVal, oldVal) {
            this.updateAndTransformData();
          },
          deep: true
        },
        commodityType(newVal, oldVal) {
          if (newVal && newVal.length > 0) {
            // console.log('新值的最后一个元素：', newVal[newVal.length - 1]);
            this.getClassificationData(newVal[newVal.length - 1]);
          }
        }
      },
      created() {
        // // 在组件创建时，从 Vuex store 中获取数据填充 specForms
        // this.specForms = this.commodityAttributesData ;
        //获取分类对应的属性
        this.getcommodityType();
      },
      methods: {
        // 计算笛卡尔积
        calculateCartesianProduct() {
          const keys = Object.keys(this.selectedValues).filter(key => this.checkedAttributes.includes(key));
          if (keys.length === 0) return;
          const values = keys.map(key => this.selectedValues[key].split(','));
          const cartesian = this.generateCartesianProduct(values);
          // 将笛卡尔积转换为对象数组
          this.cartesianProduct = this.convertCartesianToObjects(cartesian, this.checkedAttributes);
          // console.log('笛卡尔积结果：', this.cartesianProduct);
        },
        // 生成笛卡尔积的函数
        generateCartesianProduct(arrays) {
          return arrays.reduce((a, b) => a.flatMap(x => b.map(y => [...x, y])), [[]]);
        },
        convertCartesianToObjects(cartesian, headers) {
          return cartesian.map(row => {
            // 创建一个空对象来存储这一行的数据，并预先添加一个空的sku属性
            const obj = { sku: '' };
            // 遍历 headers（即 checkedAttributes），将对应的值赋给对象
            headers.forEach((header, index) => {
              obj[header] = row[index]; // 假设每一行的元素顺序与 headers 中的顺序相匹配
            });
            // 不需要额外的操作，因为sku属性已经在开始时被添加到obj中了
            return obj;
          });
        },
        getcommodityType(){
          const type = this.$store.state.addCommodity.ruleForm.commodityType;
          if(type && type.length > 0){
            this.getClassificationData(type[type.length - 1]);
          }
        },
        // updateAddCommodityData(data) {
        //   this.$store.dispatch('updateSpecFormData', data);
        // },
        // mounted(){
        //   this.generateSkus();
        //   console.log('SKU List Data:', this.skuList);
        // },
        addSku() {
          console.log('addSku');
          console.log('specForms',this.specForms);
          this.generateSkus();

          
        },
        updateAndTransformData() {
          let firstAttributeSaveDTOS = this.updateInputLists();
          // let transformedData = this.transformCategoryData(categoryData);
          console.log('最后的firstAttributeSaveDTOS', firstAttributeSaveDTOS);
          this.$store.state.addCommodity.specForm.firstAttributeSaveDTOS = firstAttributeSaveDTOS;
        },
        abc(){
          this.updateAndTransformData();
          // console.log(this.cartesianProduct);
        },
        handleAddInputValues(index){
          // if (this.newItem.trim() !== '') {  
          //   this.items.push(this.newItem.trim());  
          //   this.newItem = ''; // 清空输入框  
          // }

          // if (this.inputValues[index]) {
          //   this.inputValues[index].push(this.tempInputValues[index]);
          // } else {
          //   this.inputValues[index] = [this.tempInputValues[index]];
          // }
          // console.log('inputValues11111111111:', this.inputValues);
          // const found = this.inputValues[index].some(item => item);
          if (this.inputValues[index]) {
            this.inputValues[index].push({
              "id": "",
              "memo": "",
              "name": this.tempInputValues[index],
              "pic": "",
              "sortNum": 0
            });
          } else {
            this.inputValues[index] = [
              {
                "id": "",
                "memo": "",
                "name": this.tempInputValues[index],
                "pic": "",
                "sortNum": 0
              }
            ];
          }
          console.log('inputValues:', this.inputValues);
          this.tempInputValues[index] = '';
          this.$forceUpdate();

          this.updateAndTransformData();
        },
        handleDeleteInputValues(num,index) {
          this.inputValues[num].splice(index, 1);
          this.$forceUpdate();
          console.log(num,index);
          this.updateAndTransformData();
        },
        handleRadio(){
          this.updateAndTransformData();
          this.$forceUpdate();
        },
        openRadioDialog(){
          this.radioDialog = true;
        },
        handleAddRadio(num){
          // console.log(num);
          // console.log(this.tempInputValues[num],this.tempRadio);
          this.tempInputValues[num].push(this.tempRadio);
          this.radioDialog = false;
          this.tempRadio = '';
        },
        handleSkuInput(){
          this.$store.state.addCommodity.specForm.skuStockList = this.convertSKUData(this.cartesianProduct);
        },
        convertSKUData(data) {
          return data.map(item => {
            const skuCode = item.sku;
            const spDatas = [];
            for (const key in item) {
              if (item.hasOwnProperty(key) && key !== 'pic' && key !== 'sku') {
                spDatas.push({ key, value: item[key] });  
              }
            }
            return {
              pic: item.pic || '',
              skuCode,
              spDatas,
            };
          });
        },
        transformData(originalData) {
          //转换成要上传的数据格式
          const result = [];
          originalData.forEach((item) => {
            const firstAttribute = {
              delFlag: 0,
              id: item.id,
              name: item.name,
              secondAttributeSaveDTOS: []
            };
            item.categoryAttributeListVOList.forEach((attribute) => {
              const secondAttribute = {
                handAddStatus: attribute.handAddStatus,
                id: attribute.id,
                inputType: attribute.inputType,
                name: attribute.name,
                selectType: attribute.selectType,
                sort: attribute.sort,
                threeAttributeSaveDTOS: attribute.threeAttributeSaveDTOS
              };
              firstAttribute.secondAttributeSaveDTOS.push(secondAttribute);
            });
            result.push(firstAttribute);
          });
          // console.log('转换后的结果', result);
          return result;
          // this.transformedData = result;
        },
        updateInputLists() {
          let categoryData = JSON.parse(JSON.stringify(this.categoryData.categoryTypVOList));
          // 遍历 categoryData.categoryTypVOList
          categoryData.forEach(category => {
            // 遍历 categoryAttributeListVOList
            category.categoryAttributeListVOList.forEach(attr => {
              // 首先检查 attr 是否有 num 属性，并确保它是有效的索引
              if (attr.hasOwnProperty('num') && typeof attr.num === 'number' && attr.num >= 0 && attr.num < this.inputValues.length) {
                  // 获取对应的值，如果没有值，则设置为空字符串
                  // let value = this.inputValues[attr.num];
                  let value;
                  if (this.inputValues[attr.num] && Array.isArray(this.inputValues[attr.num])) {
                    value = this.inputValues[attr.num].map(item => item.name);
                  } else {
                    // 在这里处理为空的情况，例如可以将 value 初始化为一个空数组
                    value = [];
                  }
                  attr.threeAttributeSaveDTOS = this.inputValues[attr.num];
                  // console.log('对应的值',value);
                  attr.inputList = value ? value.join(',') : '';
                  this.selectedValues[attr.name] = value ? value.join(',') : '';
              }
              // // 检查 selectedValues 是否有对应的键
              // if (this.selectedValues.hasOwnProperty(attr.name)) {
              //   // 更新 attr.inputList 为 selectedValues 中的值
              //   attr.inputList = this.selectedValues[attr.name];
              // }
            });
          });
          let transformData = this.transformData(categoryData);
          // console.log('更新后的 categoryData:', categoryData);
          this.checkedAttributes = Object.keys(this.selectedValues);
          // console.log('更新后的 checkedAttributes:',this.selectedValues, this.checkedAttributes);
          this.calculateCartesianProduct();
          return transformData;
        },
        transformCategoryData(categoryData) {
          let transformedData = {
            "firstAttributeSaveDTOS": []
          };

          categoryData.forEach(category => {
            let newCategory = {
              delFlag: 0,
              editDetailDTOS: [],
              id: category.id || "",
              name: category.name || ""
            };

            category.categoryAttributeListVOList.forEach(attr => {
              let newAttr = {
                delFlag: 0,
                handAddStatus: attr.handAddStatus || 0,
                id: attr.id || "",
                inputList: attr.inputList || "",
                inputType: attr.inputType || 0,
                name: attr.name || "",
                selectType: attr.selectType || 0,
                sort: attr.sort || 0
              };

              newCategory.editDetailDTOS.push(newAttr);
            });

            transformedData.categoryAttributeEditDTOS.push(newCategory);
          });

          return transformedData;
        },
        getSpecForm() {
          return this.specForms; // 返回当前的specForm数据
        },
        async getClassificationData(id) {
          try {
            const response = await getCategoryData(id);
            this.selectedValues = {};
            this.inputValues = [];
            this.tempInputValues = [];
            // console.log("该分类的数据",JSON.stringify(response.data.result));
            console.log("该分类的数据",response.data.result);
            let globalNum = 0;
            response.data.result.categoryTypVOList.forEach(typVO => {
              typVO.categoryAttributeListVOList.forEach((attr) => {
                attr.num = globalNum++;
                if(attr.inputType==1 && attr.selectType ==2){
                  // this.inputValues[attr.num] = attr.inputList.split(',').map(item => item.trim());
                  this.inputValues[attr.num] = attr.inputList.split(',').map(item => {
                    const raw = {
                      "id": "",
                      "memo": "",
                      "name": item.trim(),
                      "pic": "",
                      "sortNum": 0
                    };
                    return raw;
                  });
                  console.log('可选项',attr.inputList);
                }
                else if(attr.inputType==1 && attr.selectType ==1){
                  if (!this.inputValues[attr.num]) {
                    this.inputValues[attr.num] = []; 
                  }
                  this.inputValues[attr.num][0] = {
                      "id": "",
                      "memo": "",
                      "name": "",
                      "pic": "",
                      "sortNum": 0
                    };; 
                  this.tempInputValues[attr.num] = attr.inputList.split(',').map(item => {
                    const raw = {
                      "id": "",
                      "memo": "",
                      "name": item.trim(),
                      "pic": "",
                      "sortNum": 0
                    };
                    return raw;
                  });
                  console.log('单选',this.tempInputValues[attr.num]);
                }
              });
            });
            this.categoryData = response.data.result;
            // this.normalCategoryData = this.categoryData.categoryTypVOList.filter(item => item.name);
            // console.log("该分类的属性",this.normalCategoryData);
            // const processedData = this.processAndGroupData(this.categoryData.categoryTypVOList);
            // console.log('processedData拆成选项和输入的两项',processedData)
            // this.groupedCategories = processedData.groupedCategories;
            // this.inputlessCategoryNames = processedData.inputlessCategoryNames;
          } catch (error) {
            console.error('获取该分类的数据时出错：', error);
          }
        },
        // processAndGroupData(data) {
        //   const groupedData = {};
        //   const inputlessCategories = [];

        //   data.forEach(item => {
        //     item.categoryAttributeListVOList.forEach(subItem => {
        //       if (subItem.inputList) {
        //         const inputListItems = subItem.inputList.split(',').map(val => val.trim());
        //         if (!groupedData[subItem.name]) {
        //           groupedData[subItem.name] = [];
        //         }
        //         inputListItems.forEach(inputListItem => {
        //           groupedData[subItem.name].push({
        //             label: inputListItem,
        //             value: inputListItem
        //           });
        //         });
        //       } else {
        //         inputlessCategories.push(subItem.name);
        //       }
        //     });
        //   });

        //   return {
        //     groupedCategories: groupedData,
        //     inputlessCategoryNames: inputlessCategories
        //   };
        // },
        // handleAddBodyColor() {
        //   console.log('selectedOption:', this.selectedOption);
        //   // 确保selectedOption有值并且是一个对象，避免空对象或非对象类型被添加
        //   if (this.selectedOption && typeof this.selectedOption === 'object') {
        //     // 确认此颜色尚未添加，避免重复
        //     const isDuplicate = this.specForms.bodyColors.some(color => color.value === this.selectedOption.value);
        //     if (!isDuplicate) {
        //       const imgUrl = this.getTempUrl();
        //       this.selectedOption = {
        //         ...this.selectedOption, // 复制现有属性
        //         imgUrl: imgUrl, // 添加新的 imgUrl 属性
        //       };

        //       // 将选中的颜色添加到bodyColors数组
        //       this.specForms.bodyColors.push(this.selectedOption);

        //       console.log('bodyColors:', this.specForms.bodyColors);
              
        //       // 清空selectedOption以便下次选择
        //       this.selectedOption = null;
        //     } else {
        //       console.warn('Color already exists in the list, no duplicate added.');
        //     }
        //   } else {
        //     console.warn('No valid option selected.');
        //   }
        // },
        getTempUrl(){
          const url = this.tempImageUrl;
          this.tempImageUrl = '';// 清空临时变量
          return url;
        },

        // handleAddBodyColor() {
        //   if (this.tempBodyColor) {
        //     this.specForms.bodyColors.push({value: this.tempBodyColor.toUpperCase(), label: this.tempBodyColor});
        //     // 清空selectedOption以便下次选择
        //     this.tempBodyColor = '';
        //   }
        // },
        
        // handleEditBodyColor(row) {
          
        //   console.log('编辑颜色:', row);
        // },
        
        // handleDeleteBodyColor(index, row) {
        //   this.specForms.bodyColors.splice(index, 1);
        //   console.log(row)
        // },

        // // 存储容量处理方法
        // handleAddStorageCapacity() {
        //   if (this.tempStorageCapacity) {
        //     this.specForms.storageCapacities.push({value: this.tempStorageCapacity.toUpperCase(), label: this.tempStorageCapacity});
        //     this.tempStorageCapacity = '';
        //   }
        // },

        // handleEditStorageCapacity(row) {
        //   // 实现编辑逻辑，例如发送到后端进行更新
        //   console.log('编辑容量:', row);
        // },

        // handleDeleteStorageCapacity(index, row) {
        //   this.specForms.storageCapacities.splice(index, 1);
        //   console.log(row);
        // },

        // // 网络类型处理方法
        // handleAddNetworkType() {
        //   if (this.tempNetworkType) {
        //     this.specForms.networkTypes.push({value: this.tempNetworkType.toUpperCase(), label: this.tempNetworkType});
        //     this.tempNetworkType = '';
        //   }
        // },

        // handleEditNetworkType(row) {
        //   // 实现编辑逻辑
        //   console.log('编辑网络类型:', row);
        // },

        // handleDeleteNetworkType(index, row) {
        //   this.specForms.networkTypes.splice(index, 1);
        //   console.log(row);
        // },
        // editColor(index) {

        //   console.log('编辑第', index, '个颜色:', this.specForms.bodyColors[index]);

        // },

        // // 删除颜色函数
        // deleteColor(index) {
        //   // 确认是否删除
        //   this.$confirm('确定要删除这个颜色吗？', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //     // 用户确认删除，从数组中移除对应颜色
        //     this.specForms.bodyColors.splice(index, 1);
        //   }).catch(() => {
        //     // 用户取消删除
        //     this.$message({
        //       type: 'info',
        //       message: '已取消删除'
        //     });
        //   });
        // },

        // generateSkus() {
        //   // const { bodyColors, storageCapacities, networkTypes, screenSizes, systems, batteryCapacities } = this.specForm;
        //   // const skus = [];

        //   // bodyColors.forEach(color => {
        //   //     storageCapacities.forEach(capacity => {
        //   //         networkTypes.forEach(network => {
        //   //             screenSizes.forEach(size => {
        //   //                 systems.forEach(system => {
        //   //                     batteryCapacities.forEach(battery => {
        //   //                         skus.push({
        //   //                             skuNumber: this.skuCounter++,
        //   //                             bodyColor: color.value,
        //   //                             storageCapacity: capacity.value,
        //   //                             networkType: network.value,
        //   //                             screenSize: size.value,
        //   //                             system: system.value,
        //   //                             batteryCapacity: battery.value,
        //   //                         });
        //   //                     });
        //   //                 });
        //   //             });
        //   //         });
        //   //     });
        //   // });

        //   // this.skuList = skus;



        //   this.skuList=[];
        //   const {
        //     bodyColors, 
        //     storageCapacities, 
        //     networkTypes, 
        //     screenSizes, 
        //     systems, 
        //     batteryCapacities 
        //   } = this.specForms;

        //   // 确保即使数组长度为1也按预期处理
        //   const colorValues = bodyColors.map(color => color.value);
        //   const capacityValues = storageCapacities.map(capacity => capacity.value);
        //   const networkValues = networkTypes.map(network => network.value);

        //   // 生成所有可能的组合，考虑到数组可能只有一个元素，简化循环逻辑
        //   colorValues.forEach(colorVal => {
        //     capacityValues.forEach(capacityVal => {
        //       networkValues.forEach(networkVal => {
        //         this.skuList.push({
        //           skuNumber: this.skuCounter++, 
        //           // bodyColor: [{ value: colorVal }],
        //           // storageCapacity: [{ value: capacityVal }],
        //           // networkType: [{ value: networkVal }],
        //           bodyColor: colorVal, 
        //           storageCapacity: capacityVal, 
        //           networkType: networkVal, 
        //           screenSize: screenSizes, 
        //           system: systems, 
        //           batteryCapacity: batteryCapacities
        //         });
        //       });
        //     });
        //   });
        //   console.log('skus',this.skuList)
        //   // this.skuList = skus;

        // },

        // // editSku(sku) {
        // //     console.log('Editing SKU:', sku);
        // // },
        // deleteSku(sku) {
        //     // 从列表中移除指定的SKU
        //     this.skuList = this.skuList.filter(item => item !== sku);
        // },
        // // 编辑SKU编号
        // editSku(sku) {
        //   this.editSkuForm = {...sku}; // 复制当前SKU信息到表单
        //   this.dialogEditVisible = true; // 显示编辑对话框
        // },

        // // 重置编辑表单
        // resetEditForm() {
        //   this.$refs.editSkuFormRef.resetFields(); // 重置表单
        //   this.dialogEditVisible = false;
        // },

        // // 保存编辑后的SKU编号
        // saveEditedSku() {
        //   // 确保表单验证通过
        //   this.$refs.editSkuFormRef.validate(valid => {
        //     if (valid) {
        //       // 这里简单打印出用户输入的新SKU编号，实际应用中应更新至后端
        //       console.log('新SKU编号:', this.editSkuForm.skuNumber);
        //       this.dialogEditVisible = false; // 关闭对话框
        //       // 实现SKU编号更新逻辑，如调用API更新数据库
        //     } else {
        //       console.log('表单验证未通过');
        //       return false;
        //     }
        //   });
        // },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleUploadSuccess(response, file, fileList, num, index) {
          const resultData = response;
          console.log('num , index:', num , index)
          console.log('Upload Result:', response, file, fileList);
          if (resultData && resultData.result && resultData.result.path) {
              // this.tempImageUrl = resultData.result.src;
              // console.log('tempImageUrl:', this.tempImageUrl);
              this.inputValues[num][index].pic = resultData.result.path;
          }
          // console.log('file:', file);
          // console.log('fileList:', fileList);
        },
        handleChange(file, fileList, num, index) {

          // console.log('num , index:', num , index)
          // console.log('tempInputValues', this.tempInputValues);
          // console.log('inputValues', this.inputValues);
          // 当文件发生变化时更新imageUrl  displayedImageUrl[attr.num][index]
          if (file) {
            this.displayedImage[num][index] = file;
            console.log('this.displayedImage[num][index]', this.displayedImage[num][index]);
            this.displayedImageUrl[num][index] = fileList[0].url || URL.createObjectURL(file.raw);
            this.imageUrl = this.displayedImageUrl[num][index];
            console.log('file       fileList',file,fileList)
            // this.fileList = fileList;
            // this.fileList.push(file);
            console.log('this.fileList',this.fileList)
          } else {
            this.displayedImageUrl[num][index] = '';
          }
          // console.log('this.displayedImageUrl', this.displayedImageUrl);
          this.$forceUpdate();
        },
        handlePreview(url,num,index) {
          this.dialogImageUrl = url;
          this.dialogVisible = true;
          this.dialogImage = Array.from({length: this.dialogImage.length}, () => Array(this.dialogImage[0].length).fill(false));
          this.dialogImage[num][index] = true;
          console.log('dialogImage[num][index]', this.dialogImage[num][index]);
          this.$forceUpdate();
        },
        closePreview(num,index) {
          this.dialogImage[num][index] = false;
          this.$forceUpdate();
        },
        handleRemove(file, fileList, num, index) {
          
          console.log('file       fileList          displayedImageUrl',file,fileList,this.displayedImageUrl[num][index])
          const index1 = fileList.indexOf(this.displayedImage[num][index]);
          if (index1 !== -1) {
            fileList.splice(index1, 1);
            this.fileList.splice(index1, 1);
          };
          this.displayedImageUrl[num][index] = '';
          this.inputValues[num][index].pic = '';
          this.imageUrl = '';

          console.log('this.displayedImageUrl', this.displayedImageUrl);
          // this.handleRemoveFile(file,fileList);
          // this.$refs.upload.clearFiles();
          this.$forceUpdate();
        },
        handleRemoveFile(file, fileList) {
          // this.fileList = fileList;
          console.log('file       fileList',file,fileList)
          console.log('this.fileList',this.fileList)
        }
        // handleRemove(file){
        //   // 1.获取将要删除图片的临时路径
        //   const filePath = file.response.data.tmp_path
        //   // 2.从pics数组中，找到图片对应的索引值
        //   const i = this.formData.pics.findIndex(x => x.pic === filePath)
        //   // 3.调用splice方法，移除图片信息
        //   this.formData.splice(i, 1)
        // },

      },
  };
</script>

<style scoped>
  @import '~@/assets/fonts/font.css'; 
  .main{
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;

    font-family: 'PingFang', Arial, sans-serif;
  }
  .card-section {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
  }
  /* .el-card{
  min-width: 30%;
  } */
  .card-title {
    width: 10%;
    margin-right: 3%;
    font-size: 16px;
    /* font-weight: 700; */
  }
  .card-titles {
    width: 70px;
    margin-right: 3%;
    font-size: 14px;
    /* font-weight: 500; */
  }
  .el-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  }
  .el-form-item {
  display: flex;
  align-items: center;
  }
  .upload-image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    >>>.el-upload--picture-card,
    >>>.el-upload-list__item{
      width: 40px;
      height: 10px;
      line-height: 11px;
    }
  }
  /* /deep/ .el-upload {
    width: 100%;
    height: 100%;
  } */
  .minrow{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
  }
  .mincolumn{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  .GreyBottom{
    background-color: #F7F9FC;
    padding: 25px;
    width: 90%;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .box40x40{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #D3DAE6;
    border-radius: 10px;
    margin-right: 10px;
  }
  .box40s{
    display: inline-block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #D3DAE6;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  .box40s2{
    display: inline-block;
    width: 144px;
    height: 40px;
    margin-right: 10px;
  }
  .boxtb{
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .cascader-container {
    display: flex;
    align-items: center;
  }

  .color-indicators {
    display: flex; /* 使用Flex布局以便颜色块横向排列 */
    margin-right: 10px; /* 与级联选择器之间留一定间距 */
  }

  .color-block {
    width: 15px; /* 调整为所需大小 */
    height: 15px;
    margin-right: 5px; /* 如果需要，为颜色块之间留间距 */
  }
  .box40m{
    display: inline-block;
    width: 190px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #D3DAE6;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    position: none; 
  }
  .box40l{
    display: inline-block;
    width: 400px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #F7F9FC;
    border: 1px solid #D3DAE6;
    border-radius: 10px;
    margin-right: 10px;
  }
  .box40l >>> .el-input__inner,
  .box40l >>> .el-input__suffix,
  .box40l >>> .el-select__caret,
  .box40l >>> .el-select .el-input__inner {
    background-color: #F7F9FC;
  }
  .custom-checkbox{
    margin-right: 5%;
  }
  .custom-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #344563;
    border-color: #344563;
  }
  .custom-checkbox >>> .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #344563;
  }

  .upload-placeholder, .image-preview {
    width: 40px;
    height: 40px;
    position: relative;
  }
  .upload-placeholder p {
    margin-top: 5px;
    text-align: center;
  }
  .actions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
  }
  .image-preview img:hover + .actions {
    display: block;
  }
  .preview-popup{
    /* margin-left: 40px;
    width: 200px;
    height: 200px; */
    /* background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  :deep(.el-select){
    position: static; 
  }
  :deep(.el-input) {
    position: static; 
  }
</style>